<template>
  <div>
    <b-modal
      id="form"
      title="新主题"
      @ok="submit"
      @close="
        () => {
          $haier.clearValue(form);
        }
      "
      @cancel="
        () => {
          $haier.clearValue(form);
        }
      "
      no-close-on-backdrop
    >
      <b-form>
        <b-form-group label="主题名称">
          <b-form-input autofocus v-model="form.name"></b-form-input>
        </b-form-group>
        <b-form-group label="对该主题的描述">
          <b-form-textarea v-model="form.desc"></b-form-textarea>
        </b-form-group>
      </b-form>
    </b-modal>
    <b-container fluid>
      <b-row class="p-2">
        <b-col><b-form-checkbox name="check-button" switch>只看有商品的</b-form-checkbox></b-col>
        <b-col class="text-right">
          <b-button-group size="sm">
            <b-button variant="danger">删除</b-button>
            <b-button variant="success" v-b-modal.form>添加</b-button>
            <b-button variant="info" @click="load">刷新</b-button>
          </b-button-group>
        </b-col>
      </b-row>
    </b-container>
    <b-overlay :show="loading">
      <b-table
        :fields="fields"
        :items="items"
        table-class="text-center"
        thead-class="thead"
        outlined
        sticky-header="690px"
        no-border-collapse
        no-select-on-click
      >
        <template #head(checkbox)>
          <b-form-checkbox
            v-model="allSelected"
            @change="selectAll"
          ></b-form-checkbox>
        </template>
        <template #cell(checkbox)="{ item }">
          <b-form-checkbox-group
            v-model="selectData"
            @change="
              () => {
                allSelected = items.length == selectData.length;
                if (allSelected) selectAll(true);
              }
            "
          >
            <b-form-checkbox :value="item.id" class="m-0"></b-form-checkbox>
          </b-form-checkbox-group>
        </template>
        <template #cell(index)="{ index }">{{ index + 1 }}</template>
        <template #cell(op)="{ item }">
          <b-button-group size="sm">
            <b-button variant="info">编辑</b-button>
            <b-button
              @click="
                () => {
                  form.pid = item.id;
                }
              "
              v-b-modal.form
              variant="success"
              >添加子主题</b-button
            >
            <b-button variant="primary" :to="`/commodity/${item.id}`"
              >商品管理</b-button
            >
            <b-button variant="danger">禁用</b-button>
          </b-button-group>
        </template>
      </b-table>
    </b-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allSelected: false,
      loading: true,
      selectData: [],
      form: {
        pid: "",
        name: "",
        desc: "",
      },
      fields: [
        { key: "checkbox", label: "选择" },
        { key: "index", label: "索引" },
        { key: "name", label: "名称" },
        { key: "commTotal", label: "商品数" },
        { key: "createDate", label: "创建日期" },
        { key: "desc", label: "描述" },
        { key: "op", label: "操作" },
      ],
      items: [],
    };
  },
  methods: {
    selectAll(checked) {
      this.selectData = checked
        ? this.items.map((item) => item.id).slice()
        : [];
    },
    load() {
      this.loading = true;
      this.$haier
        .get("/admin/topic", { cascade: false, lazy: true })
        .then(({ data }) => {
          this.items = data;
          this.loading = false;
        })
        .catch((res) => {
          console.log("error" + res);
        });
    },
    submit() {
      this.$haier
        .post("/admin/topic", this.form)
        .then(() => {
          this.load();
          this.$haier.clearValue(this.form);
        })
        .catch((res) => {
          console.log(res);
        });
    },
  },
  created() {
    this.load();
  },
};
</script>

<style>

</style>